<template>
  <div class="playersInfo">
    <Vheader :header="header"></Vheader>
    <div class="title">
      <span class="spanCss">参与总人数</span>
      <span class="sumCss">{{number}}人</span>
      <input type="text" name="search" class="search" placeholder="搜索"><img src="static/imgs/playersInfoImg/list_search.png" alt="">
    </div>
    <ul class="templateUl">
      <el-table
        :data="tableData"
        class="tableContent"
        :default-sort = "{prop: 'grade', order: 'descending'}"
        style="width: 100%">
        <el-table-column
          type="index"
          label="排行"
        width="80">
        </el-table-column>
        <el-table-column
          label="微信头像">
          <template slot-scope="scope">
          <img :src=scope.row.wxImg alt="头像" style="width:50%;"/>
        </template>
        </el-table-column>
        <el-table-column
          prop="nicname"
          label="微信昵称">
        </el-table-column>
        <el-table-column
          prop="openId"
          label="openId">
        </el-table-column>
        <el-table-column
          prop="grade"
          sortable
          label="得分">
        </el-table-column>
      </el-table>
    </ul>
    <Vfooter></Vfooter>
    <Vdialog></Vdialog>
  </div>
</template>

<script>
/*eslint-disable*/
import Vheader from './common/Vheader'
import Vfooter from './common/Vfooter'
import Vdialog from './common/Vdialog'
import { getGradeAction } from '../axios/api/playerRank_api'

export default {
  name: 'playersInfo',
  data () {
    return {
      header: {
        userName: '',
        logout: this.logout,
        login: '',
        templateAction: this.templateAction,
        template: '返回首页'
      },
      activityId: '',
      tableData: [],
      number:0
    }
  },
  components: {
    Vheader,
    Vfooter,
    Vdialog
  },
  created () {
    this.activityId = this.$route.query.activityId
    this.getGrade()
  },
  methods: {
    templateAction(){
      this.$router.push({name: 'homePage'});
    },
    async getGrade () {
      let { data } = await getGradeAction({activityId: this.activityId})
      if (data.code == 1) {
        let activityGradeList = data.activityGradeList
        this.number = activityGradeList && activityGradeList.length
        activityGradeList.forEach((list,index) => {
          let item = {
            rank: index,
            wxImg: list.userInfo && list.userInfo.headimgurl,
            nicname: list.userInfo && list.userInfo.nickname,
            openId: list.username,
            grade: list.grade
          }
          this.tableData.push(item)
        })
      } else {
        this.$message({
          type: 'error',
          message: '服务器错误，请稍后再试！'
        })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.playersInfo{
  min-width: 1000px;
  overflow: hidden;
  background-color: #e9e9e7;
  font-family: 'SimSun';
  position: relative;
}
  .playersInfo .templateUl{
  	height: 916px;
  	box-shadow: 4px 4px 13px #666;
  	background-color: #fff;
    margin: 45px 120px;
    justify-content: center;
    flex-direction: column;
  }
  .title{
    margin-left: -10%;
    margin-top: 50px;
  }
.playersInfo .spanCss{
    display: inline-block;
    width: 157px;
    height: 53px;
    font-family: 'SimSun';
    font-size: 25px;
    color: #fff;
    background-color: #47cb69;
    line-height: 53px;
    border-radius: 2px;
  }
  .sumCss{
    width: 100px;
    height: 53px;
    font-family: 'SimSun';
    font-size: 25px;
    color: #ccc;
    background-color: transparent;/*后面颜色透明*/
    text-align: center;
  }
  .sumCss{
    font-family: 'SimSun';
    font-size: 25px;
    color: #818181;
    text-align: center;
    margin-right: 100px;
  }
  .search{
    width: 600px;
    height: 53px;
    background-color: #d6d6d6;
    color: #818181;
    font-family: 'SimSun';
    font-size: 30px;
    text-align: center;
    border:2px solid #c7c7c7;
    border-radius: 2px;
  }
    .title img{
      margin-left: -50px;
      margin-bottom: -17px;
    }

</style>
<style>
  .tableContent .has-gutter .is-leaf{
    background-color: #5f5f5f;
    color: #fff;
    text-align: center;
    font-size: 36px;
    height: 70px;
    border-right: 2px solid #ebeef5;
  }
  .tableContent.el-table th>.cell{
    line-height: 35px;
  }
  .tableContent.el-table tbody tr{
    height: 100px;
    font-size: 34px;
    background-color: #c7c7c7;
  }
  .tableContent tr{
    height: 100px;
  }
  .tableContent.el-table .cell{
    line-height: 35px;
    color: #fff;

  }
  .tableContent.el-table tr:nth-child(1){
    background-color: #ffa664;
  }
  .tableContent.el-table tr:nth-child(2){
    background-color: #5ce680;
  }
  .tableContent.el-table tr:nth-child(3){
    background-color: #89dfff;
  }
  .tableContent.el-table tr:hover{
    background-color: #c7c7c7;
  }
  .tableContent.el-table__body-wrapper td{
    border-right: 2px solid #ebeef5;
    padding: 0;
  }
</style>
